<template>
  <span class="top-message-box">
    <el-badge  :is-dot="Boolean(unreadNum)" class="message-unread">
      <i class="el-icon-bell" @click="handleMsg"></i>
    </el-badge>
  </span>
</template>

<script>
  import {mapGetters} from "vuex";

  export default {
    name: "top-message",
    data() {
      return {};
    },
    created() {
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["unreadNum"])
    },
    props: [],
    methods: {
      handleMsg() {
        if (this.$route.path === '/myMessage/index') return
        this.$router.push('/myMessage/index')
      }
    },
    components: {}
  };
</script>

<style lang="scss">
  .top-bar__item .top-message-box{
    cursor: pointer;
    .message-unread .el-badge__content, .el-badge__content.is-fixed{
      top: 25px;
      right: 7px;
    }
  }
</style>
